//创建分组弹窗
import { useState, useEffect } from "react";
import CommonModal from "@/components/CommonModal";
import CommonInput from "@/pages/OrderModule/common/components/CommonInput";
import { Form, Button } from "antd";
import CommonLoading from "@/components/CommonLoading";
import { isEmpty } from "lodash";

const CreatGroupModal = ({ visible, item, handleCancel, hanleOk }) => {
	const [loading, setloading] = useState(false);

	const [form] = Form.useForm();

	useEffect(() => {
		if (visible) {
			form.resetFields();
		}
	}, [visible]);

	const onFinish = () => {
		form
			.validateFields()
			.then(val => {
				hanleOk(val);
			})
			.catch(err => {});
	};

	return (
		<CommonModal
			minHeight="100px"
			title={isEmpty(item) ? `创建分组` : "重命名"}
			visible={visible}
			onCancel={handleCancel}
			onOk={onFinish}
			width="494px"
		>
			<Form
				name="create-group"
				onFinish={onFinish}
				autoComplete="off"
				layout="horizontal"
				labelAlign="right"
				form={form}
				initialValues={{
					name: !isEmpty(item) ? item.name : undefined
				}}
			>
				<Form.Item name="name" rules={[{ required: true, message: "请输入分组名称" }]} style={{ marginTop: 16 }}>
					<CommonInput placeholder="分组名称" maxLength={20} showCount aria-required />
				</Form.Item>
			</Form>
			<CommonLoading loading={loading} />
		</CommonModal>
	);
};

export default CreatGroupModal;
